(function () {


    var list = document.querySelectorAll('.menu h2')
 

    for (var i = 0; i < list.length; i++) {
        list[i].onclick = function () {
            var  playing =   document.querySelectorAll('.submenu[status=playing]')
            if(playing.length) return
            var openList = document.querySelector('.submenu[status=open]')
            openList && colsedNode(openList)
            toggleNode(this.nextElementSibling)
        }
    }


    // getAttribute
    var itemHeight = 30,
        totalMiunt = 3000;

    // 打开
    function openNode(node) {
        var to = node.children.length * itemHeight,
            from = 0;
        var status = node.getAttribute('status')
        if (status && status != 'colsed') return
        console.log(status);

        node.setAttribute('status', 'playing')
        createAnimation({
            to,
            from,
            totalMiunt,
            onmove: (n) => {
                node.style.height = n + 'px'
            },
            onend: () => {
                node.setAttribute('status', 'open')
            }
        })
    }

    // 关闭
    function colsedNode(node) {
        var to = 0,
            from = node.children.length * itemHeight;
        var status = node.getAttribute('status')
        if (status != 'open') return
        createAnimation({
            to,
            from,
            totalMiunt,
            onmove: (n) => {
                node.style.height = n + 'px'
            },
            onend: () => {
                node.setAttribute('status', 'colsed')
            }
        })
    }

    function toggleNode(node) {
        var status = node.getAttribute('status')
        if (status === 'open') {
            colsedNode(node)
        } else if (status === 'colsed') {
            openNode(node)
        } else {
            openNode(node)
        }
    }

})()